<template>
  <!--选择系统类型-->
  <div class="register-container">
    <div class="select-box">
      <div class="select-desc"><span class="desc-t">*</span>请选择系统的使用人群</div>
      <div class="select animated tada">
        <div class="select-left" @click="toAdmin">
          <div class="left-img" />
          <div>企业用户</div>
        </div>
        <div class="select-right">
          <div class="right-img" />
          <div>个人用户</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  methods: {
    toAdmin() {
      window.location.href = 'http://localhost:9528'
    }
  }
}
</script>

<style scoped lang="less">
  .register-container{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    .select-box{
      width: 350px;
      height: auto;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 10px;
      .select{
        /*animation: bounce-in .5s;*/
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
        margin-top: 15px;
        .select-left{
          width: 130px;
          height: 130px;
          display: flex;
          flex-flow: column nowrap;
          margin-right: 15px;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background-color: #fff;
          .left-img{
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
            background: url("../../assets/company.png");
            background-size: cover;
          }
          &:hover{
            cursor: pointer;
            transform: scale(1.3);
            transition: transform 0.5s;
          }
        }
        .select-right{
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          .right-img{
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
            background: url("../../assets/personal.png") no-repeat;
            background-size: cover;
          }
          &:hover{
            cursor: pointer;
            transform: scale(1.3);
            transition: transform 0.5s;
          }
        }
        @keyframes top-to-center {
          from {
            left: 0;
          }
          to {
            left: 50%;
          }
        }
      }
      .select-desc{
        margin: 10px 0;
        font-size: 15px;
        width: 100%;
        text-align: center;
        animation: bounce-in .5s;
        color: #848891;
        .desc-t{
          color: red;
          margin-right: 10px;
        }
      }
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

  }
</style>
